<!--TODO抽屉部分组件-->
<template>
  <a-drawer
    :title="title"
    :width="width"
    placement="right"
    :closable="false"
    :visible="visible"
    @close="onClose"
  >
    <div v-if="tableShowSelect">
      <a-table
        ref="table"
        size="middle"
        class='Table'
        bordered
        :rowKey="rowKey"
        :scroll="{
          x:'max-content'
        }"
        :columns="tableColums"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :customRow="customRowFn"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type: multiple ? 'checkbox':'radio'}"
        @change="handleTableChange">
      </a-table>
    </div>

    <div v-if="!tableShowSelect">
      <a-table
        ref="table"
        size="middle"
        class='Table'
        bordered
        :rowKey="rowKey"
        :scroll="{
        x:'max-content'
        }"
        :columns="tableColums"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :customRow="customRowFn"
        @change="handleTableChange">
      </a-table>
    </div>
    <!--    底部取消\确认按钮-->
    <div
      :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
    >
      <a-button :style="{ marginRight: '8px' }" @click="onClose">
        取消
      </a-button>
      <a-button type="primary" @click="handOk">
        确认
      </a-button>
    </div>
  </a-drawer>
</template>

<script>
import type from '@views/exception/type'
import { getAction, postAction } from '@/api/manage'
import { PageListMixin } from '@/mixins/PageListMixin'

export default {
  name: 'policys',
  description: '抽屉公用组件',
  mixins: [PageListMixin],
  props: {
    tableShowSelect: {
      type: Boolean,
      default: true
    },
    haveSelect: {
      type: Object
    },
    title: {
      type: String,
      default: '政策'
    },
    width: {
      type: String || number,
      default: '60%'
    },
    rowKey: {
      type: String,
      default: 'id'
    },
    way: {
      type: String,
      default: 'get'
    },
    tableUrl: {
      type: String,
      default: 'get'
    },
    tableColums: {
      type: Array
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectedRowKeys: [],
      selectionRows: [],
      visible: false,
      url: {
        list: null
      },
      dataSource: []
    }
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      console.log(this.ipagination)
      this.loadData()
    },
    loadData(arg) {
      if (!this.url || !this.url.list) {
        // this.$message.error("请设置url.list属性!")
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }

      var params = this.getQueryParams()//查询条件
      this.loading = true
      let request = null
      const isNoPagnation = ['getDictByCode'].some(url => new RegExp(`${url}$`).test(this.url.list))
      if (isNoPagnation) {
        request = getAction
      } else {
        request = postAction
      }
      var that = this
      return request(this.url.list, params).then((res) => {
        if (res.success) {
          if (res.result.records) {
            that.dataSource = res.result.records
          } else {
            that.dataSource = res.result
          }
          that.ipagination.total = res.result.total || 0
        } else {
          that.$message.warning(res.message)
        }
      }).finally(()=>{
        that.loading = false
      })
      // }
    },
    //TODO params 请求地址数据体， key必要时的关键字，
    edit(params, key) {
      this.visible = true
      this.url.list = this.tableUrl
      this.columns = this.tableColums
      let method = null
      if (this.way == 'post') {
        method = postAction
      } else if (this.way == 'get') {
        method = getAction
      }
      this.queryParam = { size: 10, current: 1, ...params }
      this.loadData(1)
      // this.loading = true
      // method(this.tableUrl, { ...params }).then(res => {
      //   if (!res.success) {
      //     this.$message.error(res.message)
      //     return
      //   }
      //   if (res.result.records) {
      //     this.dataSource = res.result.records
      //   } else {
      //     this.dataSource = res.result
      //   }
      //   this.loading = false
      // })
    },
    handOk() {
      this.$emit('polocyOk', this.selectionRows, this.queryParam)
      this.onClose()
    },
    onClose() {
      this.queryParam = {}
      this.selectionRows = []
      this.selectedRowKeys = []
      this.visible = false
    },
    /** 删除已选择的 */
    handleDeleteSelected(record, index) {
      this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record[this.rowKey]), 1)
      this.selectionRows.splice(index, 1)
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
    },
    customRowFn(record,e2) {
      return {
        on: {
          click: () => {
            let key = record[this.rowKey]
            if (!this.multiple) {
              this.selectedRowKeys = [key]
              this.selectionRows = [record]
              // this.selectedTable.dataSource = [record]
            } else {
              let index = this.selectedRowKeys.indexOf(key)
              if (index === -1) {
                this.selectedRowKeys.push(key)
                this.selectionRows.push(record)
                // this.selectedTable.dataSource.push(record)
              } else {
                this.handleDeleteSelected(record, index)
              }
            }
          }
        }
      }
    }
  }
}
</script>

<style scoped>

</style>